<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=nouser-scalable=no" >
    <title>yejq online judge</title>

    <!-- Bootstrap -->
    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="{{static_url("css/main.css")}}" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
	<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->
  </head>
  <body>

    <!-- start navagation -->
    <nav class="navbar navbar-default navbar-fixed-bottomnavbar-fixed-bottom" role="navigation" id="navigation">
      <div class="container-fluid">
	<!-- Brand and toggle get grouped for better mobile display -->
	<div class="navbar-header">
	  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
	  </button>
	  <a class="navbar-brand" href="/">YOJ</a>
	</div>

	<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
	  <ul class="nav navbar-nav">
            <li><a href="/" class="tooltip-test" data-toggle="tooltip" data-placement="bottom" title="Home page">Home</a></li>
            <li><a href="/questions" class="tooltip-test" data-toggle="tooltip" data-placement="bottom" title="List of Questions">Questions</a></li>
            <li><a href="/contest" class="tooltip-test" data-toggle="tooltip" data-placement="bottom" title="Current Contests">Contest</a></li>
            <li><a href="/rank" class="tooltip-test" data-toggle="tooltip" data-placement="bottom" title="RankList">Rank</a></li>
            {% if user.authority >= 2 %}
            <li><a href="/design" class="tooltip-test" data-toggle="tooltip" data-placement="bottom" title="Question Design">Design</a></li>
            {% end %}
            {% if user.authority == 3 %}
            <li><a href="/admin" class="tooltip-test" data-toggle="tooltip" data-placement="bottom" title="Administration">Admin</a></li>
            {% end %}
            <li><a href="/logout" class="tooltip-test" data-toggle="tooltip" data-placement="bottom" title="Logout">Logout</a></li>

	  </ul>
	  
          <form class="navbar-form navbar-right" role="search">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Search Problem" id="search">&nbsp&nbsp<a href="/"><span class="glyphicon glyphicon-search"></a>  <!--这里需要修改-->
            </div>
          </form>
	  <div class="navbar-right nav navbar-nav">
	    <p class="navbar-text">Hello, {{user.nickname}}</p>
	  </div>
	</div><!-- /.container-fluid -->
    </nav>

    <!-- end navigation  -->


    <!-- start main-->
    <div class="container">
      <div role="tabpanel">

	<!-- Nav tabs -->
	<ul class="nav nav-tabs" role="tablist">
		<li role="presentation" class="active"><a href="#personal" aria-controls="profile" role="tab" data-toggle="tab">Personal</a></li>
	  	<li role="presentation" ><a href="#status" aria-controls="home" role="tab" data-toggle="tab">My Status</a></li>
	</ul>

	<!-- Tab panes -->
	<div class="tab-content">
	  <div role="tabpanel" class="tab-pane fade" id="status">
	    <div class="row">
	      <div class="col-md-12">
		<br>
		<div class="panel panel-primary">
		  <div class="panel-heading">
		    <h3 class="panel-title">My Status</h3>
		  </div>

		  <!-- List group -->
		  <table class="table">
		    <thead>
		      <tr>
			<th width="10%" id="place_center">RunId</th>
			<th width="10%" id="place_center">QuestionId</th>
			<th width="15%" id="place_center">SubmitTime</th>
			<th width="10%" id="place_center">RunTime(MS)</th>
			<th width="10%" id="place_center">RunMem(KB)</th>
			<th width="10%" id="place_center">Language</th>
			<th width="15%" id="place_center">Status</th>
			<th width="10%" id="place_center">SorceCode</th>
		      </tr>
		    </thead>
		    <tbody>
		    	{% for statu in status %}
		      <tr>
    			<td id="place_center">{{statu.runid}}</td>
    			<td id="place_center">{{statu.pid}}</td>
    			<td id="place_center">{{statu.stime}}</td>
    			<td id="place_center">{{statu.runtime}}</td>
    			<td id="place_center">{{statu.runmem}}</td>
    			<td id="place_center">{{statu.language}}</td>
    			<td id="place_center">
    				{% if statu.statu == "accepted" %}
    				<span id = "accepted">Accepted</span>
    				{% else %}
    				<span id = "error">{{statu.statu}}</span>
    				{% end %}
    			</td>
	    		<td id="place_center">
	    		<!-- Button trigger modal -->
					<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal{{statu.runid}}">
					  Source
					</button>

					<!-- Modal -->
					<div class="modal fade" id="myModal{{statu.runid}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
					  <div class="modal-dialog">
					    <div class="modal-content">
					      <div class="modal-header">
					        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					        <h4 class="modal-title" id="myModalLabel">View Sorce Code</h4>
					      </div>
					      <div class="modal-body">
					        <pre id="place_left">{{statu.code}}</pre>
					      </div>
					      <div class="modal-footer">
					        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					      </div>
					    </div>
					  </div>
					</div>
				</td>
		      </tr>
		      {% end %}
		    </tbody>
		  </table>
		</div>
	      </div>



	    </div>
	  </div>


	  <div role="tabpanel" class="tab-pane fade in active" id="personal">
	    <br>
	    <div class="row">
	      <div class="col-md-7">
		<div class="panel panel-primary">
		  <div class="panel-heading">
		    <h3 class="panel-title"> Details of {{user.nickname}}</h3>
		  </div>
		  <ul class="list-group">
		    <table class="table">
		      <thead>
			<tr>
			  <th width="40%" id="place_center">Information</th>
			  <th width="40%" id="place_center">Details</th>
			</tr>
		      </thead>
		      <tbody>
			<tr>
    			  <td id="place_center">User</td>
    			  <td id="place_left">{{user.username}}</td>
			</tr>
			<tr>
    			  <td id="place_center">Nick</td>
    			  <td id="place_left">{{user.nickname}}</td>
			</tr>
			<tr>
    			  <td id="place_center">Sex</td>
    			  <td id="place_left">{{user.sex}}</td>
			</tr>
			<tr>
    			  <td id="place_center">Email</td>
    			  <td id="place_left">{{user.email}}</td>
			</tr>
			<tr>
    			  <td id="place_center">Phone</td>
    			  <td id="place_left">{{user.phone}}</td>
			</tr>
			<tr>
    			  <td id="place_center">Register Time</td>
    			  <td id="place_left">{{user.register_time}}</td>
			</tr>
			<tr>
    			  <td id="place_center" colspan="2">
    		    	    <!-- Button trigger modal -->
			    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
			      change
			    </button>

			    <!-- Modal -->
			    <form role="form" method="post" id="change_form">
			      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
				  <div class="modal-content">
				    <div class="modal-header">
				      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				      <h4 class="modal-title" id="myModalLabel">Information seetings</h4>
				    </div>

				    <div class="modal-body">
				      <table class="table">
         				<tr>
         				  <th width="40%" id="place_center">Information</th>
      					  <th width="40%" id="place_center">Changes</th>
         				</tr>
         				<tr>
         				  <td id="place_center">User</td>
 					  <td>{{user.username}}</td>
         				</tr>
         				<tr>
         				  <td id="place_center">Password</td>
         				  <td id="place_left">
  					      <input type="password" class="form-control" placeholder="New Password" name="new_password">
					  </td>
         				</tr>
         				<tr>
         				  <td id="place_center">Nick</td>
         				  <td id="place_left"><input type="text" class="form-control" placeholder="New Nickname" name="new_nickname"></td>
         				</tr>
         				<tr>
         				  <td id="place_center">Sex</td>
         				  <td id="place_left"></td>
         				</tr>
         				<tr>
         				  <td id="place_center">Email</td>
         				  <td id="place_left">
         				    <div class="input-group">
  					      <span class="input-group-addon">@</span>
  					      <input type="text" class="form-control" placeholder="New Email" name="new_email">
					    </div>
					  </td>
         				</tr>
         				<tr>
         				  <td id="place_center">Phone</td>
         				  <td id="place_left"><input type="text" class="form-control" placeholder="New Phone" name="new_phone"></td>
         				</tr>
         				<tr>
         				  <td id="place_center">Register Time</td>
         				  <td id="place_center">{{user.register_time}}</td>
         				</tr>
				      </table>
				    </div>
				    <div class="modal-footer">
				      <button type="button" class="btn
				      btn-default"
				      data-dismiss="modal">Close</button>
				      <button type="button" class="btn btn-primary" id="user_change">Save changes</button>
				    </div>
				  </div>
				</div>
			      </div>
			    </form>
    			  </td>
			</tr>
		      </tbody>
		    </table>
		  </ul>
		</div>
	      </div>

	      <div class="col-md-4">
		<div class="panel panel-primary">
		  <div class="panel-heading">
		    <h3 class="panel-title"> Statics for {{user.nickname}}</h3>
		  </div>
		  <ul class="list-group">
		  	<li class="list-group-item">status : {{user.status}}</li>
		    <li class="list-group-item">Raw Submit : {{user.submit}}</li>
		    <li class="list-group-item">Raw Accepted : {{user.accepted}}</li>
		    <li class="list-group-item">Accepted rate : 
		    	{% if user.submit == 0 %}
		    		0
		    	{% else %}
		    		{{'%.2f' % (float(user.accepted)/(user.submit) * 100)}}%
		    	{% end %}
		    </li>
		    <li class="list-group-item">Raw rate : 
		    	{% if user.submit == 0 %}
		    		0
		    	{% else %}
		    		{{'%.2f' % (float(user.accepted)/(user.status) * 100)}}%
		    	{% end %}
		    </li>
		  </ul>
		</div>
	      </div>

	    </div>
    	    <!-- add here-->
	  </div>
	</div>

      </div>

    </div>
    <!-- end main -->

    <div class="container">
      <div class="footer">
	<span> powered by yejq 2015</span>
      </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script src="{{static_url("js/main.js")}}"></script> 
  </body>
</html>
